<template>
	<view class="e-swiper-indicator">
		<view class="e-swiper-indicator__wrapper" v-if="props.indicatorMode === 'line'"
			:class="[`e-swiper-indicator__wrapper--${props.indicatorMode}`]" :style="{
				width: addUnit(lineWidth * props.length),
				backgroundColor: props.indicatorInactiveColor
			}">
			<view class="e-swiper-indicator__wrapper--line__bar" :style="[lineStyle]"></view>
		</view>
		<view class="e-swiper-indicator__wrapper" v-if="props.indicatorMode === 'dot'">
			<view class="e-swiper-indicator__wrapper__dot" v-for="(item, index) in props.length" :key="index"
				:class="[index === props.current && 'e-swiper-indicator__wrapper__dot--active']" :style="[dotStyle(index)]">

			</view>
		</view>
	</view>
</template>
<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	export default defineComponent({
		mixins: [mpMixin]
	});
</script>
<script lang="ts" setup>
	import {
		computed,
		toRefs
	} from 'vue'
	import {
		indicatorProps,
	} from './indicator-props'
	import {
		addUnit
	} from "../../libs/utils/_utils";
	import type {
		StyleProperties
	} from "../../libs/tokens";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";
	
	const {
		swiperIndicator: swiperIndicatorDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(indicatorProps)
	
	const props = useDefaultProps < DefaultProps['swiperIndicator'] > (_props, swiperIndicatorDefaultProps);

	const lineWidth = 32
	// 指示器为线型的样式
	const lineStyle = computed(() => {
		let style: StyleProperties = {}
		style.width = addUnit(lineWidth)
		style.transform = `translateX(${ addUnit((props.value.current||0) * lineWidth) })`
		style.backgroundColor = props.value.indicatorActiveColor
		return style
	})
	// 指示器为点型的样式
	const dotStyle = (index: number) => {
		let style: StyleProperties = {}
		style.backgroundColor = index === props.value.current ? props.value.indicatorActiveColor : props.value.indicatorInactiveColor
		return style
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/swiper-indicator.scss";
</style>
